<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
    <style>
        /*
            通过选择器匹配
            可以通过不同的选择器去匹配某个或者某些元素
            选择器类型很多,主要分为:基本选择器、混合选择器、伪类选择器等
        */

        /*
            基本选择器主要分为以下几种
            id选择器
                以#开头,跟id属性值,表示匹配当前页面中指定id的元素
                id值不能重复,因此此时匹配的是一个元素
            class选择器
                以.开头,跟class属性值
            标签选择器
                直接写标签名,表示匹配所有对应的标签
            *选择器
                直接写*,表示匹配当前文档中的一切元素
            当某个元素被多种选择器匹配到,则存在优先级问题
            id选择器>class选择器>标签选择器>*
            !important关键字会破坏优先级
         */
        #p1{
            color:green;
        }
        .c1{
            color:blue;
        }
        p{
            color:yellow;
        }
        /**{*/
        /*    color:pink!important;*/
        /*}*/
    </style>
    <!--
        引入方式的优先级:
            行内式最高
            内部样式与外部引入没有优先级,谁在后面,谁生效
    -->
<!--    <link rel="stylesheet" href="test.css" type="text/css">-->
    <style>
        @import "test.css";
    </style>
<!--    <style>-->
<!--        .c2{-->
<!--            color:#0000ff;-->
<!--        }-->
<!--        p{-->
<!--            color:pink;-->
<!--        }-->
<!--    </style>-->
</head>
<body>
<!--
  style属性:为当前元素设置css样式,其属性值由一系列的键值对组成
    语法  属性名:属性值;属性名:属性值;...
-->
<p style="color:red;font-size:30px;">这是一个段落</p>
<p id="p1">这是一个段落</p>
<p class="c1">这是一个段落</p>
<p class="c1">这是一个段落</p>
<div class="c1">这是一个c1的div</div>
<span class="c1">这是一个c1的span</span>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<div class="c2">这是c2的div</div>
<div class="c2">这是c2的div</div>
<div class="c2">这是c2的div</div>
</body>
</html>